<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件</title>
		<script src="../js/jquery-3.6.3.min.js"></script>
		<style>
			.b{
				font-size: 50px;
				color:red;
				cursor: pointer;
			}
		</style>
		<script>
			$(function(){
				$("#fruit").on("mouseover","li",function(){
					$(this).addClass("b");
				}).on("mouseout","li",function(){
					$(this).removeClass("b");
				});
				$("#b1").click(function(){
					let u=$("ul#fruit");
					let n=window.prompt("请输入新品");
					if(!n)
						return;
						
					u.append("<li>"+n+"</li>");
				});
			});
		</script>
	</head>
	<body>
		<div>
			<ul id="fruit"> 
				<li>桃子</li>
				<li>柿子</li>
				<li>西瓜</li>
			</ul>
		</div>
		<button id="b1">增加新品</button>
	</body>
</html>